import React, { Component } from 'react'

export default class App extends Component {
    state = {
      mytext:'',
      list:[{
        id: Math.random(),
        detail: "111",
        isChecked:true
     },{
        id: Math.random(),
        detail: "222",
        isChecked:true
     },{
        id: Math.random(),
        detail: "333",
        isChecked:false
     }]
    }
    addItem(){
        var newList = [...this.state.list];
              newList.push({
                  id:Math.random(),
                  detail: this.state.mytext
              });
              this.setState({
                  list: newList,
                  mytext:''
              });
    }
    deleteItem(index){
        var newList = [...this.state.list];
        newList.splice(index,1);
        this.setState({
            list:newList
        })
    }
    handleClick(index){
        var newList =[...this.state.list];
        newList[index].isChecked = !newList[index].isChecked;
        this.setState({
            list:newList
        })
    }
    render() {
    return (
      <div>
          <input onChange={
              (evt)=>{
                this.setState({
                    mytext:evt.target.value
                })
              }
          } value={this.state.mytext} ></input>
          <button onClick={()=>{this.addItem()}}>Add</button>
          <ul style={{
              listStyleType:'none'
          }}>
              {
                  this.state.list.map((item, index) => 
                    <div>
                     <li key={item.id}>
                     <input type='checkbox' checked={item.isChecked} onChange={()=>this.handleClick(index)}></input>
                        <span style={{textDecoration: item.isChecked?'line-through':''}} >{item.detail}</span>
                        <button onClick={()=>this.deleteItem(index)}>
                            delete
                        </button>
                     </li>
                    </div>)
              }
          </ul>
          {this.state.list.length===0 ? <div>空空如也</div> : null}
      </div>
    )
  }
}
